<template>
  <a-drawer :title="title" width="80%" :visible="visible" @close="visible = false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="10">
          <a-col :md="4" :sm="24">
            <a-form-item>
              <a-input v-model="MaterialName" placeholder="物料编码/物料名称" />
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="24">
            <a-button
              type="primary"
              @click="
                () => {
                  this.pagination.current = 1
                  this.getDataList()
                }
              "
            >查询</a-button
            >
            <a-button style="margin-left: 8px" @click="Reset">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div style="text-align: right; font-weight: bold; font-size: 20px; margin-bottom: 10px">合计总数量：{{ nums }}</div>
    <a-table
      ref="table"
      :columns="columns"
      :scroll="{ y: heights }"
      :rowKey="(row) => row.Id"
      :dataSource="data"
      :pagination="pagination"
      :loading="loading"
      :rowClassName="rowClassName"
      :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, getCheckboxProps: getCheckboxProps }"
      :bordered="true"
      size="small"
    >
      <!-- <span slot="action" slot-scope="text, record">
        <template>
        </template>
      </span> -->
      <!-- <template slot="PackId" slot-scope="text, record, index">
        <span>{{ boxtype(record) }}</span>
      </template> -->
      <template slot="MaterialId" slot-scope="text, record, index">
        <span>{{ boxtype(record) }}</span>
      </template>
      <template slot="dataIndex" slot-scope="text, record, index">
        <span>{{ (pagination.current - 1) * pagination.pageSize + index + 1 }}</span>
      </template>
      <template slot="actions" slot-scope="text, record">
        <a-button type="link" @click="showQrCode(record)">二维码</a-button>
      </template>
    </a-table>
    <div style="height: 50px"></div>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1,
      }"
    >
      <a-button :style="{ marginRight: '8px' }" @click="visible = false">取消</a-button>
      <a-button type="primary" @click="handleprint" :disabled="!selectedRows.length">打印</a-button>
    </div>
    <a-modal
      title="选择打印机"
      :visible="printflag"
      :confirm-loading="confirmLoading"
      width="20%"
      :zIndex="1040"
      @ok="printOK"
      @cancel="cancel"
    >
      <!-- {{ this.printtype }} -->
      <a-form-model ref="form" :model="entity" :rules="rules">
        <a-form-model-item label="打印机" prop="PrinterId">
          <a-select style="width: 100%" v-model="entity.PrinterId">
            <a-select-option v-for="item in printlist" :key="item.Id" :value="item.Id">
              {{ item.Name }}
            </a-select-option>
          </a-select></a-form-model-item
        >
        <!-- <a-form-model-item label="物品打印机" prop="MaterialPrinterId" >
          <a-select style="width: 100%" v-model="entity.MaterialPrinterId">
            <a-select-option v-for="item in printlist2" :key="item.Id" :value="item.Id">
              {{ item.Name }}
            </a-select-option>
          </a-select></a-form-model-item> -->
      </a-form-model>
    </a-modal>
    <a-modal
      title="二维码"
      :visible="showQrCodeVisible"
      destroyOnClose
      :footer="null"
      @cancel="showQrCodeVisible = false"
    >
      <div style="display: flex; justify-content: center">
        <div id="qrcode" ref="qrcode"></div>
      </div>
    </a-modal>
  </a-drawer>
</template>

<script>
import QRCode from 'qrcodejs2'
export default {
  props: {
    parentObj: { type: Object },
  },
  data() {
    return {
      showQrCodeVisible: false,
      rules: {
        PrinterId: [{ required: true, message: '请选择打印机', trigger: 'change' }],
      },
      MaterialName: '',
      confirmLoading: false,
      printlist: [],
      printlist2: [],
      entity: {},
      visible: false,
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 50,
          scopedSlots: { customRender: 'dataIndex' },
        },
        {
          title: '条码',
          dataIndex: 'QrCode',
          ellipsis: true,
          // scopedSlots: { customRender: 'PackId' }
        },

        { title: '物品名称', dataIndex: 'BoxName', width: '300px' },
        { title: '物品编码', dataIndex: 'MaterialCode', ellipsis: true },
        { title: '物品规格', dataIndex: 'MaterialSpec', ellipsis: true },
        { title: '批次', dataIndex: 'Batch', ellipsis: true },
        {
          title: '数量',
          align: 'right',
          dataIndex: 'Num',
          width: '150px',
          customRender: (text) => {
            return this.$NumFormatting(text)
          },
        },
        {
          title: '操作',
          dataIndex: 'actions',
          width: '70px',
          align: 'center',
          scopedSlots: { customRender: 'actions' },
        },
      ],
      data: [],
      nums: '',
      title: '',
      id: '',
      heights: 600,
      printflag: false,
      queryParam: {},
      loading: false,
      selectedRowKeys: [],
      selectedRows: [],
      pagination: {
        current: 1,
        pageSize: 25,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`,
        pageSizeOptions: ['25', '50', '100'], //设置pageSize的可选值，页面啊可以通过下拉框进行选择
        showSizeChanger: true,
        onChange: this.onPageChange,
        onShowSizeChange: this.changePageSize,
        defaultCurrent: 1,
        total: 0,
      },
    }
  },
  methods: {
    // 展示二维码
    showQrCode(row) {
      console.log(row)
      this.showQrCodeVisible = true
      this.$nextTick(() => {
        let qrcode = new QRCode('qrcode', {
          width: 200,
          height: 200,
          text: row.QrCode,
        })
      })
    },
    Reset() {
      this.MaterialName = ''

      this.getDataList()
    },
    changePageSize(current, size) {
      this.pagination.current = current
      this.pagination.pageSize = size
      this.getDataList()
    },
    onPageChange(current, size) {
      console.log(current, size, 'onPageChange')
      this.pagination.current = current
      this.pagination.pageSize = size
      this.getDataList()
    },
    getCheckboxProps(row) {
      // console.log(row)
      return {
        props: {
          disabled: row.PackId === '合计',
        },
      }
    },
    boxfun(record) {
      if (record.PackId === '合计') {
        return ''
      }
      if (!record.PackId) {
        return '单件物品'
      } else {
        return '包'
      }
    },
    rowClassName(record, index) {
      if (record.PackId === '合计') {
        return 'heji'
      }
    },
    boxtype(record) {
      // console.log(record)
      if (record.Type === 0) {
        return '包'
      } else if (record.Type === 1) {
        return '单件物品'
      } else if (record.Type === 2) {
        return '成品物品'
      }
    },
    handleprint() {
      this.printflag = true
    },
    printOK() {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return
        }
        this.confirmLoading = true
        this.$http
          .post(`PB/PB_Location/PrintPackCode?PrinterId=${this.entity.PrinterId}`, this.selectedRows)
          .then((res) => {
            this.printflag = false
            if (res.Success) {
              this.$message.success('打印成功')
            } else {
              this.$message.error(res.Msg)
            }
            this.confirmLoading = false
          })
      })
    },
    cancel() {
      //打印机取消按钮后清空验证
      this.$refs['form'].resetFields()
      this.printflag = false
    },
    getprint() {
      this.$http.post('/PB/PB_JobBooking/GetPrinterListData?PrintType=PrintPackage', {}).then((res) => {
        this.printlist = res.Data
      })
      // this.$http.post('/PB/PB_JobBooking/GetPrinterListData?PrintType=PrintMaterial', {}).then(res => {
      //   this.printlist2 = res.Data
      // })
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      console.log(selectedRows)
      this.selectedRows = selectedRows
    },
    getDataList() {
      this.selectedRowKeys = []
      console.log(this.queryParam)
      this.loading = true
      this.$http
        .post(`/PB/PB_Location/GetLocaMaterialDetail`, {
          PageIndex: this.pagination.current,
          PageRows: this.pagination.pageSize,

          Search: { locaId: this.id, MaterialName: this.MaterialName }
        })
        .then((resJson) => {
          this.loading = false
          if (resJson.Success) {
            // let Num = 0
            // resJson.Data.forEach(item => {
            //   Num = Number(item.Num) + Num
            // })
            // this.nums = this.$NumFormatting(Num)
            this.data = resJson.Data.LocaMaterialDetail
            this.nums = this.$NumFormatting(resJson.Data.TotalNums)
            this.pagination.total = resJson.Data.TotalCount
          } else {
            this.$message.error(resJson.Msg)
          }

          // const pagination = { ...this.pagination }
          // pagination.total = resJson.Total
          // this.pagination = pagination
        })
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination = { ...pagination }
      this.getDataList()
    },
    init() {
      this.visible = true
    },

    async openForm(id, title) {
      this.pagination.current = 1
      this.pagination.pageSize = 25
      this.init()
      this.heights = document.body.clientHeight * 0.75
      this.nums = ''
      this.data = []
      this.title = title
      this.id = id
      this.selectedRows = []
      this.getprint()
      this.getDataList()
    },
    handleSubmit() {},
  },
}
</script>
<style lang="less" scoped>
/deep/.heji {
  position: sticky;
  bottom: 0;
  background: #fff;
  font-size: 19px;
  font-weight: bold;
}
/deep/.ant-table td {
  white-space: nowrap;
}
</style>
